<template>
    <div>
        房号：<input type="text" v-model="info.card" />
        名称：<input type="text" v-model="info.name" />
        <button @click="getlist">查询</button>
        <button @click="chongzhi">重置</button>
        <h1>列表</h1>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <th>id</th>
                    <th>房号</th>
                    <th>名称</th>
                    <th>图片</th>
                   <th>创建时间</th>
                    <th>操作</th>
                </tr>
                <tr v-for="item in data.list">
                    <td>{{ item.id }}</td>
                    <td>{{ item.card }}</td>
                    <td>{{ item.houseTypeName }}</td>
                    <td><img :src="item.photo" width="100" height="100" /></td>
                    <td>{{ moment(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}</td>
                    <td>
                        <button @click="Update(item.id)">编辑</button>
                        <button @click="Del">删除</button>
                    </td>

                    </tr>
            </tbody>
        </table>
    </div>
    <div>
      <!-- 显示 -->
      <span
        >共<b>{{ data.totalCount }}</b
        >条</span
      >
      <span
        >每页<b>{{ info.pageSize }}</b
        >条</span
      >
      <span
        >共<b>{{ info.pageIndex }}/{{ data.totalPage }}</b
        >页</span
      >
      <!-- 分页  全都是改是页码 -->
      <input type="button" value="首页" @click="goPage(1)" />
      <input type="button" value="上一页" @click="goPage(info.pageIndex - 1)" />
      <span v-for="item in data.totalPage" @click="goPage(item)">{{
        item
      }}</span>
      <input type="button" value="下一页" @click="goPage(info.pageIndex + 1)" />
      <input type="button" value="尾页" @click="goPage(data.totalPage)" />
      <input type="number" v-model="info.pageIndex" />
      <input type="button" value="跳转" @click="goPage(info.pageIndex)" />
      <!-- 这个改的页容量  -->
      <select v-model="info.pageSize" @change="show">
        <option :value="item" v-for="item in arr">每页{{ item }}条</option>
      </select>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

let info:any = reactive({

    card: "",
  name: "",
  pageIndex: 1,
  pageSize: 2,
  
  

})
let data:any = reactive({
    list: [],
    totalCount: 0,
    totalPage: 0,
  
})

let arr = [2, 5, 10, 20];
let ids:any = ref([]);
onMounted(() => {
    getlist(); 
})
const goPage = (num: any) => {
    
    if (num < 1) {
       info.pageIndex = 1;
       return;

    }
    if(num>data.totalPage){
        info.pageIndex=data.totalPage;
        return  ; 
    }
    info.pageIndex = num;
    getlist();
    return;
}
const chongzhi=()=>{
info.card="";   
info.houseTypeName=""; 
info.pageIndex=1;

getlist();
}
const show = () => {
    info.pageIndex = 1;
    getlist();
}
const getlist=()=>{
 axios({
    url:"/api/HouseType/GetAll",
    method:"get",
    params:info,
 }) 
 .then((res)=>{
    data.list=res.data.list;
    data.totalCount=res.data.totalCount;
    data.totalPage=res.data.totalPage;
 })
 .catch((err)=>{
    console.log(err);
 })
}
const Del=(id:any)=>{
    var f=confirm("确定删除吗");
    if(f){
        axios({
        url:"/api/HouseType/Del",
        method:"get",
        data:{Id:id},
    }) 
    .then((res)=>{
    if(res.data>0){
        alert("删除成功");
        getlist(); 
    }
    else{   
        alert("删除失败");
        return;
    }
    })
   .catch((err)=>{
    console.log(err); 
   })
    }
   
}
const Update=(id:any)=>{
    router.push({path:"/UpdateHouseType",query:{id:id}}); 
}
</script>

<style scoped>

</style>